<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		 <script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.0.min.js" ></script>
		<script type="text/javascript" src="../js/head_public.js" ></script>
		
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/city.data-3.js" ></script>
		<script type="text/javascript" src="../js/uploadPreview.js" ></script>
		<style>
			.file{position: absolute;top: 0rem;right:0.1rem ;z-index: 1;opacity: 0;}
			.kong{background: #efeff4;}
			input{font-size: 14px!important;}
			.mui-btn-blue{background: #ff7e00!important;border: none!important;}
			.diqu-div span{font-size: 14px;color: #323232;}
			.diqu-div{text-align: center;padding: 5px 0px;color:#ff7e00;}
		    .diqu-container{position: relative;}
		    .diqu-ul{position: absolute;top: 0px;left: 0px;width: 100%;padding: 5px;}
		    .diqu-ul li{margin: 5px;padding:0px 10px;color: #323232;font-size: 14px;height: 30px;line-height: 30px;border-bottom: 1px dashed #ccc;overflow: hidden;}
		    .city,.town{display: none;}
		    .diqu-ul li span:nth-of-type(2){float: right;font-size: 16px;color: #666;}
		    .quyu{display: none;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav ding-bar">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">商家入驻</h1>
		</header>
		<div class="mui-content" >
		    <form class="changep-form" style="background: #fff;">
		    	<p><span>入住类型：</span>
		    		<select name="storeclass" id="leixing">
		    			<option value="">请选择入住类型</option>
		    		</select>
		    	</p>
		    	<p><span>经营类目：</span>
		    		<select name="type">
		    			<option value="">请选择经营类目</option>
		    			<option value="1">商户</option>
		    			<option value="2">居家养老</option>
		    		</select>
		    	</p>
		    	<div class="kong"></div>
		    	<p><span>商户名称：</span><input type="text" name="store_name" placeholder="请设置商铺名称"></p>
		    	<div class="kong"></div>
		    	<p><span>商户账号：</span><input type="text" name="member_name" placeholder="请设置商户账号"></p>
		    	<div class="kong"></div>
		    	<p><span>手机号码：</span><input type="text" name="mobile" placeholder="请输入手机号码" id="phone"></p>
		    	<p class="yzm"><input type="text" name="captcha" placeholder="输入收到的验证码"><button type="button" id="hqyzm">获取验证码</button></p>
		        <input type="hidden" name="true_mobile" id="true_mpbile" />
		        <input type="hidden" name="true_captcha" id="true_captcha" />
		        <div class="kong"></div>
		        <p><span>所在地区：</span>
		        	<input type="text" placeholder="请选择区县" readonly="readonly" name="eara" id="diqu"/>
		        </p>
		        <p><span>商铺地址：</span><input type="text" name="store_address" placeholder="请输入街道门牌号"></p>
		        <div class="kong"></div>
		        <p class="yyzz"><span style="width: 30%;">上传营业执照</span><input type="file" class="file" name="check_img" id="check_img" accept="image/*"><button type="button">选择文件</button></p>
		        <img src="../images/banner.png" style="display: block;width: 60%;margin:10px auto;" id="yulan"/>
		        <div style="background: #efeff4;padding: 2px 0px;">
		        	 <button class="ch-ph-btn" type="button" style="font-weight: bold;letter-spacing: 2px;">提交申请</button>
		        </div>
		        <div class="mui-backdrop quyu" id="quyu" style="overflow: scroll;top: 50px;">
			<!--//地区框-->
			<div class="diqu-div" style="background: #FFF;">
	        	<span id="province-choose"></span>--
	        	<span id="city-choose"></span>--
	        	<span id="towm-choose"></span>
	        </div>
	        <div class="diqu-container"  style="background: #FFF;">
	        	<ul class="diqu-ul" id="sheng"style="background: #FFF;">
		        	
		        </ul>
	        	<ul class="diqu-ul city" id="city"style="background: #FFF;">
		        	
		        </ul>
	        	<ul class="diqu-ul town" id="town"style="background: #FFF;">
		        	
		        </ul>
	        </div>
		</div>
		    </form>
		</div>
		<script src="../js/common.js"></script>
		<script src="../js/session.js"></script>	
		<script type="text/javascript">
			mui.init()		
			//倒计时
		    var t=59;
			function refer()
			{
				if(t==0)
				{
				   $("#hqyzm").prop("disabled",false);//取消禁用
				   $("#hqyzm").css({"background-color":"#ff7e00","border-color":"#ff7e00"});
				   $("#hqyzm").html("验证码");
				}else{
				   $("#hqyzm").html("验证码"+t+"s");
				   t--; // 计数器递减
				}
			}
		var userid=getCookie("userid");
		var provinceid="";//存储省的id
		var cityid="";//存储市的id
		var townid="";//存储区的id
		var provice="";
        var city="";
        var town="";
        //显示地区
		    mui(".mui-content").on("tap","#diqu",function(){
		    	$("#quyu").show();
		    	//			    读取地区
              	$.post(net+"/public/index.php?s=api/shop/getArea",{data:null},function(data){
	               if(data.code==200){
		               	if(data.result!=null&&data.result!=""&&data.result.length!=0){
		               		var str="";
		               		var str2="";
		               		var str3="";
		               		$.each(data.result, function(index,val) {	
		               	   	    str+="<li data-id='"+val.area_id+"'><span>"+val.area_name+"</span><span>&gt;</span></li>"
		               	    });
		               	  $("#sheng").html(str);
		               	    //点击省加载该省下的是
		               	    mui("#sheng").on("tap","li",function(){
		               	    	provinceid=$(this).attr("data-id");
		               	    	provice=$(this).find("span:nth-of-type(1)").html();
		               	    	$("#province-choose").html($(this).find("span:nth-of-type(1)").html())
		               	    	//循环找到省的id
		               	    	$.each(data.result,function(index,val){
		               	    		console.log(val.area_id)
		               	    		if(val.area_id==provinceid){
		               	    			//循环得到该省的市
		               	    			$.each(val.child,function(index,val2){
		               	    				str2+="<li data-id='"+val2.area_id+"'><span>"+val2.area_name+"</span><span>&gt;</span></li>"
		               	    			})
		               	    			$("#city").html(str2);
		               	    			$("#sheng").hide();
		               	    			$("#city").show();
		               	    		}
		               	    		
		               	    	})
		               	    })
		               	    //点击省加载该省下的是
		               	    mui("#city").on("tap","li",function(){
		               	    	cityid=$(this).attr("data-id");
		               	    	$("#city-choose").html($(this).find("span:nth-of-type(1)").html())
		               	    	city=$(this).find("span:nth-of-type(1)").html();
		               	    	//循环找到省的id
		               	    	$.each(data.result,function(index,val){
		               	    		if(val.area_id==provinceid){
		               	    			//循环得到该省的市
		               	    			$.each(val.child,function(index,val2){
		               	    				//循环得到该市的id
		               	    				if(val2.area_id==cityid){
		               	    					//循环得到该市的区
		               	    					$.each(val2.three_child,function(index,val3){
				               	    				str3+="<li data-id='"+val3.area_id+"'><span>"+val3.area_name+"</span><span>&gt;</span></li>"
				               	    			})
		               	    					
		               	    				}
		               	    			})
		               	    			$("#town").html(str3);
		               	    			$("#city").hide();
		               	    			$("#town").show();
		               	    		}

		               	    	})
		               	    })
		               	    $("#town").on("tap","li",function(){
		               	    	townid=$(this).attr("data-id");
		               	    	$("#towm-choose").html($(this).find("span:nth-of-type(1)").html());
		               	    	town=$(this).find("span:nth-of-type(1)").html();
		               	    	alert(provice+city+town)
		               	    	$("#diqu").val(provice+city+town);
                                $("#quyu").hide();
		               	    })
		               	}
	               }
				   },'json'
				);
		    })
			
		
		$(function(){
			
			if(userid==""||userid==null){
				alert("您还没有登录，请先登录");
				location.href="../public/login.html";
			}else{
				//获取入住类型
				$.post(net+"/public/index.php?s=api/login/getStoreClass",{},function(res){
					if(res.code=="200"){
						var str="";
						if(res.result!=null&&res.result.length!=0){
							$.each(res.result, function() {
							     str+='<option value="'+this.storeclass_id+'">'+this.storeclass_name+'</option>'
						   });
						}
						$("#leixing").append(str)
					}
				})
					// 验证码获取倒计时
			mui(".mui-content").on("tap","#hqyzm",function(){
			  // 检查手机号格式
			  disableBtn(this);
			  var username =/^1[0-9]{10,10}$/;
			  var phone=$("#phone").val();
			  if(phone==null||phone==''){
			    alert("手机号不能为空");
			    return false;
			  }else if(!username.test(phone)){
			    alert("手机号格式不正确");
			    return false;
			  }
			  
			  $(this).css("background-color","#999");
			  var param = {};  //register
			  // Checkphone			
			  param.sms_mobile = phone;
			  param.type = "3";
			  // 判断返回值
			  $.post(net+"/public/index.php?s=api/login/get_captcha",param,function(res){
			  	  if (res.code=="200") {
			  	  	$("#true_captcha").val(res.result.sms_captcha)
			  	  	$("#true_mpbile").val(res.result.sms_mobile)
					$("#hqyzm").attr("disabled","disabled");
					$("#hqyzm").css({"background-color":"#999","border-color":"#999"});
				  	var inter=setInterval("refer()",1000); //启动1秒定时
				  }else {
				    alert(res.message);
				  }
			  }) 
			})
			}
		})
		$("#check_img").uploadPreview({ Img: "yulan", Width: 120, Height: 120 });
		$(".ch-ph-btn").click(function(){
		var $phone =/^1[0-9]{10,10}$/;
		var $passwd = /^\w{6,12}$/;
		var $username=/^[\u4e00-\u9fa5]{2,4}$/;
		var $card=/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
		var params = $(".changep-form").serializeObject();//将表单序列化为JSON对象
		if(params.storeclass==""||params.storeclass==null){
			alert("请选择入住类型！");
			return false;
		}
		
		if(params.type==""||params.type==null){
			alert("请设置商铺名称！");
			return false;
		}
		
		if(params.member_name==""||params.member_name==null){
			alert("请设置商户账号！");
			return false;
		}
		if(params.mobile==""||params.mobile ==null){
			alert("请填写手机号！");
			return false;
		}else if(!$phone.test(params.mobile)){
			alert("请填写正确的手机号！");
			return false;
		}
		if(params.captcha==""||params.captcha==null){
			alert("请输入验证码！");
			return false;
		}
		if(params.eara==""||params.eara==null){
			alert("请选择所在地区！");
			return false;
		}
		if(params.store_address==""||params.store_address==null){
			alert("请输入街道门牌号！");
			return false;
		}
		//封装数据
		var check_img =document.getElementById("check_img").files[0]
		var formdate= new FormData();
		var arrays=params.eara.split("-");
		formdate.append("member_id",userid)
		formdate.append("member_name",getCookie("username"))
		formdate.append("store_name",params.store_name)
		formdate.append("storeclass",params.storeclass)
		formdate.append("type",params.type)
		formdate.append("check_img",check_img)
		formdate.append("mobile",params.mobile)
		formdate.append("captcha",params.captcha)
		formdate.append("true_mobile",params.true_mobile)
		formdate.append("true_captcha",params.true_captcha)
		formdate.append("store_address",params.store_address)
		formdate.append("province_id",provinceid)
		formdate.append("city_id",cityid)
		formdate.append("region_id",townid)
		formdate.append("seller_name",params.member_name)
		$.ajax( {
			type : "POST",
			url : net+"/public/index.php?s=api/login/stroe_register",
			data : formdate,
			processData:false,
			contentType: false,
			success : function(msg) {
				if(msg.code=="200"){
					alert("入驻成功，等待审核");
//				location.href = "../public/index.html";
				}
				
			}
		});
	});

	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
			if (o[this.name]) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ];
				}
				o[this.name].push(this.value || '');
			} else {
				o[this.name] = this.value || '';
			}
		});
		return o;
	}
		</script>
	</body>

</html>